
<template>
    <view class="page col">
    <view class="head"> 
      <view class="imgs flex">
        <view class="img-warp col center">
          <view class="img"> </view>  
        </view>
        <view class="img-warp col center">
          <view class="img"> </view> 
        </view>
      </view>
    </view>
    <view class="infos">
      <view class="yellow-bar"> </view>
      <view class="info-inner">
        <view class="name">测试 </view>
        <view class="company">兔兔网络科技 </view>
        <view class="no"> 编号 10290291021</view>
        <view class="info-imgs flex">
          <view class="user"> </view>
          <view class="app"> <view class="appPng">   </view></view>
        </view>
        <view class="number"> 在售房源 <view class="bg-number"> 18</view></view>
        <view class="number"> 出租房源 <view class="bg-number"> 18</view></view>
        <view class="number"> 推荐新盘 <view class="bg-number"> 18</view></view>
        <view class="phone flex">
          <view class="phone-left">
            <view class="phone-txt"> 置业专线 </view>
            <view class="phone-number"> 180 1234 1234</view>
          </view>
          <view class="qr-img"> </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script> 
export default { 
  data() {
    return {
      search: "",
       
    };
  },
  mounted() {},
  methods: {
    doList() {},
  },
};
</script>  

<style> 

.head {
  font-size: 12px;
  color: #000;
  padding: 20px; 
  border: 1px solid #DFDFDF;
  margin: 5px;
  border-radius: 4px; 
  background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/share-top.png) center center / 100% 100%;
}
.imgs {
  justify-content: center;
  margin-top: 20px;
}
.img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px;
}
.info-imgs {
  align-items: center;
}
.infos {
  margin-top: 40px;
  background-color: #444444;
  flex: 1;
  color: #ccc;
}

.yellow-bar {
  margin: 25px 0;
  height: 15px;
  background-color: #fff100;
}
.info-inner {
  padding-left: 20px;
}
.name {
  font-size: 24px;
  font-weight: 600;
  color: #fff100;
}
.company {
  font-size: 22px;
  font-weight: 600;
  color: #DFDFDF;
  margin: 5PX 0px;
}
.no {
  font-size: 12px;
  color: #ccc;
  margin: 5PX 0px;
}
.info-imgs{
  margin: 20PX 0;
}
.user {
  width: 100px;
  height: 100px;
  background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
}
.app {
  flex: 1;
  height: 20vw;
  display: FLEX;
  align-items: center;
  justify-content: center;
  background: #FFF100;
}

.number {
  display: flex;
}
.bg-number {
  font-size: 2em;
  font-weight: 600;
  color: #fff;
}
.phone {
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 100px;
  margin-top: 50px;
}
.phone-number {
  font-size: 1em;
  font-weight: 600;
  color: #fff;
}
.qr-img {
  width: 200px;
  height: 200px;
  background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
}
</style>